<template>
  <el-dialog
    v-model="dialogVisible"
    :title="winTitle"
    :close-on-click-modal="false"
    append-to-body
    width="800"
    class="editDialog"
    align-center
  >
    <el-form
      inline
      class="basicForm"
      label-position="right"
      v-model="formObj"
      label-width="120px"
    >
      <el-form-item label="产品型号名称" required>
        <el-input v-model="formData.modelName"></el-input>
      </el-form-item>
      <el-form-item label="产品型号编码">
        <el-input v-model="formData.modelCode"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="数据大小">
        <el-select v-model="formData.shardSize" placeholder="请选择数据大小">
          <el-option
            v-for="item in formData.shardList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否有符号">
        <el-select v-model="formData.isSigned" placeholder="请选择">
          <el-option
            v-for="item in formData.signList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="备注">
        <el-input v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false" auto-insert-space
        >取消</el-button
      >
      <el-button type="primary" @click="onConfirm" auto-insert-space
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

import { ElMessage } from "element-plus";

import { saveProduct } from "../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("");

let formData = ref({
  modelName: "",
  modelCode: "",
  id: "",
  signList: [
    { label: "是", value: 1 },
    { label: "否", value: 0 },
  ],

  shardSize: "",
  isSigned: 0,
  remark: "",
  shardList: [],
});

let isEdit = ref(false);

const openDialog = (shardList, rowData) => {
  dialogVisible.value = true;
  formData.value.shardList = shardList;

  if (!rowData) {
    winTitle.value = "新增";
    formData.value.modelName = "";
    formData.value.modelCode = "";
    formData.value.shardSize = "";
    formData.value.isSigned = 0;
    formData.value.remark = "";
    isEdit.value = false;
  } else {
    winTitle.value = "修改";
    formData.value.modelName = rowData.modelName;
    formData.value.id = rowData.id;
    formData.value.modelCode = rowData.modelCode;
    formData.value.shardSize = "" + rowData.shardSize;
    formData.value.isSigned = rowData.isSigned;
    formData.value.remark = rowData.remark;
    isEdit.value = true;
  }
};

const onConfirm = () => {
  saveProduct({ ...formData.value }).then((data) => {
    if (data) {
      emits("confirm");
      ElMessage.success("保存成功");
      dialogVisible.value = false;
    } else {
      ElMessage.error("保存失败");
    }
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
  > * {
    width: calc(50% - 20px);
    margin-right: 20px;

    .selectInput {
      flex: 1;
    }

    :deep(.el-date-editor) {
      width: 100%;
    }
  }

  > .long {
    width: calc(100% - 20px);
    margin-right: 20px;
  }

  .sumUnit {
    .text {
      margin-right: 10px;
    }
  }
}

.uploadWrap {
  position: relative;
  width: 270px;

  input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>
